<template>
  <div class="record-button">
    <ElBadge v-if="visible" :value="row.recordCount" :show-zero="false">
      <ElButton :="attrs" @click="$emit('click', $event)">
        {{ props.content }}
      </ElButton>
    </ElBadge>
  </div>
  
</template>

<script setup lang="ts">
import { useAttrs, computed } from 'vue'
const attrs = useAttrs()

interface Props {
  content: string,
  auths: Set<string>
  auth: null | string,
  row: any
}
const props = withDefaults(defineProps<Props>(), {
  content: '',
  auth: null,
  auths: () => new Set()
})

const emit = defineEmits(['click'])

const visible = computed(() => {
  return !props.auth || props.auths.has(props.auth)
})

defineExpose({
  auth: props.auth
})
</script>


<style scoped lang="scss">
.record-button {
  display: inline-block;
  margin-left: 12px;
  margin-right: 12px;
  :deep(.el-badge) {
    vertical-align: baseline;
  }
}
</style>
